class Details {
    constructor() {
        this.span = document.querySelector('#main .information .fugur span');
        this.fugur = document.querySelector('#main .information .fugur');
        this.fugur_img = document.querySelector('#main .information .fugur_img');
        this.pic = document.querySelector('#main .information .fugur_img img');
        this.ul = document.querySelector('#main .information .big_glass ul');
        this.title = document.querySelector('#main .information_son .title p');
        this.cart_list = JSON.parse(localStorage.getItem('cart')) || [];// 购物车数据
        this.price = document.querySelector('#main .information_son .price_tuijian span');
        this.price_h = document.querySelector('#main .information_son .price_one span');
        this.btn = document.querySelector('#main .container11 .information .information_son .shopCar .shop_car');
        this.options_x = document.querySelectorAll('.evaluation_son');
        this.options_x_x = document.querySelectorAll('.evaluation .bottom div');
        this.init();
    }
    init() {
        this.over();
        this.out();
        this.move();
        this.changePic();
        this.render();
        this.addCart();
        this.comments();
        this.options();
        this.render_comments();
    }
    over() {
        this.fugur.addEventListener('mouseover', (e) => {
            this.span.style.display = 'block'
            this.fugur_img.style.display = 'block'
        })
    }
    out() {
        this.fugur.addEventListener('mouseout', (e) => {
            this.span.style.display = 'none'
            this.fugur_img.style.display = 'none'
        })
    }
    move() {
        this.fugur.onmousemove = (e) => {
            var e = e || window.event;
            let x = e.pageX - this.span.offsetWidth * 0.5 - this.fugur.parentNode.offsetLeft;
            let y = e.pageY - this.span.offsetHeight * 1.5;
            if (x < 0) {
                x = 0
            } else if (x > this.fugur.offsetWidth - this.span.offsetWidth) {
                x = this.fugur.offsetWidth - this.span.offsetWidth
            }
            if (y < 0) {
                y = 0
            } else if (y > this.fugur.offsetHeight - this.span.offsetHeight) {
                y = this.fugur.offsetHeight - this.span.offsetHeight
            }
            this.span.style.left = x + 'px';
            this.span.style.top = y + 'px';
            let w = x / (this.fugur.offsetWidth - this.span.offsetWidth);
            let h = y / (this.fugur.offsetHeight - this.span.offsetHeight);
            this.pic.style.left = -w * (this.pic.offsetWidth - this.fugur_img.offsetWidth) + 'px';
            this.pic.style.top = -h * (this.pic.offsetHeight - this.fugur_img.offsetHeight) + 'px';
        }
    }
    changePic() {
        this.lis = document.querySelectorAll('#main .information .big_glass ul li');
        this.lis.forEach(item => {
            item.addEventListener('mouseover', () => {
                this.fugur.firstElementChild.src = item.firstElementChild.src;
                this.pic.src = item.firstElementChild.src;
            })
        })
    }
    // 渲染页面
    render() {
        let list = JSON.parse(localStorage.getItem('details')) || [];
        if (list.length > 1) {
            list.shift()
        }
        for (let i = 0; i <= list[0].goods_img_arr.length; i++) {
            var img = document.createElement('img');
            if (i == 0) {
                img.src = list[list.length - 1].img_small_logo;
            } else {
                img.src = list[list.length - 1].goods_img_arr[i - 1]
            }
            var li = document.createElement('li');
            li.appendChild(img);
            this.ul.appendChild(li);
        }
        this.fugur.firstChild.src = list[0].img_small_logo;
        this.pic.src = list[0].img_small_logo;
        this.changePic();
        this.title.innerHTML = list[0].title;
        this.price.innerHTML = list[0].current_price;
        this.price_h.innerHTML = list[0].price;
    }
    options() {
        this.options_x.forEach((item, index) => {
            item.onclick = () => {
                for (let i = 0; i < this.options_x_x.length; i++) {
                    this.options_x_x[i].style.display = 'none';
                    this.options_x[i].style.background = ''
                }
                this.options_x_x[index].style.display = 'block';
                this.options_x[index].style.background = '#8b8b8b'
            }
        })
    }
    // 我要评论
    comments() {
        let arr = JSON.parse(localStorage.getItem('comments'))||[];
        this.options_x_x[1].lastElementChild.onclick = () => {
            console.log(this.options_x_x[0].firstElementChild);
            if (this.options_x_x[1].firstElementChild.value) {
                var str = `
                <li>${this.options_x_x[1].firstElementChild.value}<span class="dell">删除</span></li>
            `
                this.options_x_x[0].firstElementChild.innerHTML = str;
                str = null;
                arr.push(this.options_x_x[1].firstElementChild.value)
                localStorage.setItem('comments', JSON.stringify(arr))
                this.options_x_x[1].firstElementChild.value = '';
            } else {
                alert('请输入内容在发表')
            }
        }
        this.options_x_x[0].firstElementChild.onclick = (e) => {
            var e = e || window.event;
            var target = e.targat || e.srcElement;
            if (target.className == 'dell') {
                target.parentNode.parentNode.remove(target.parentNode);
            }
        }
        this.options_x_x[1].lastElementChild.onclick =()=>{
            this.render_comments()
        }
        this.render_comments()
    }
    // 渲染评论
    render_comments() {
        let arr = JSON.parse(localStorage.getItem('comments'))||[];
        if(arr.length){
            let str = '';
            arr.forEach(item=>{
                str +=`
                <li>${item}<span class="dell">删除</span></li>
                `
            })
            this.options_x_x[0].firstElementChild.innerHTML = str;
        }
    }

    // 加入购物车
    addCart() {
        this.btn.addEventListener('click', () => {
            let list = JSON.parse(localStorage.getItem('details'));
            if (!this.cart_list.length) {
                list[0].cart_number = 1;
                this.cart_list.push(list[0]);
            } else {
                let targetId = list[0].goods_id;
                if (this.cart_list.some((item) => { return item.goods_id == targetId; })) {
                    let goods = this.cart_list.find((item) => {
                        return item.goods_id == targetId
                    })
                    goods.cart_number++
                } else {
                    list[0].cart_number = 1;
                    this.cart_list.push(list[0])
                }

            }
            localStorage.setItem('cart', JSON.stringify(this.cart_list));
            alert('亲，已经加入了哦')
        })

    }
}
new Details